<template>
  <div class="telemetry-data-list">
    <!-- 上部分：筛选条件 -->
    <div class="filter-bar">
      <div class="filter-controls">


        <el-button type="primary" @click="searchTasks">
          查询
        </el-button>
        <el-button @click="resetFilter">
          重置
        </el-button>
      </div>
    </div>

    <!-- 下部分：任务类型表格 -->
    <div class="table-section">
      <div class="table-header">
        <h3>遥测数据列表</h3>
        <div class="table-controls">

        </div>
      </div>
      <div class="table-container">
        <el-table
            :data="telemetryListData"
            v-loading="loading"
            stripe
            border
            style="width: 100%"
            :header-cell-style="{
            background: '#f8f9fa',
            color: '#333',
            fontWeight: '500',
            textAlign: 'center',
          }"
            :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="id" label="id" min-width="200" align="left">
            <template #default="scope">
              <span>{{ scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="数据名称" min-width="160" align="center">
            <template #default="scope">
              <div class="time-cell">
                <span>{{ scope.row.name}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280" align="center" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" type="danger" @click="deleteTask(scope.row)">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { Clock, Search, Edit, Delete, Plus, DataLine, VideoPlay, Timer, Folder } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { telemetryDataListAPI } from '../api/index.js'

const router = useRouter()

// 响应式数据

const loading = ref(false)
const saveLoading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 遥测数据列表数据
const telemetryListData = ref([])

// 加载遥测数据列表
const loadTelemetryList = async () => {
  loading.value = true;
  try {
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
    };

    console.log('请求遥测数据列表参数:', params);

    const result = await telemetryDataListAPI.getTelemetryDataList(params);

    if (result && result.code === 0) {
      telemetryListData.value = result.data || [];
      console.log('遥测数据列表加载成功:', telemetryListData.value.length, '个遥测数据');
    } else {
      throw new Error(result?.msg || '获取遥测数据列表失败');
    }
  } catch (error) {
    console.error('加载遥测数据列表失败:', error);
    ElMessage.error(`加载遥测数据列表失败: ${error.message}`);
    telemetryListData.value = [];
  } finally {
    loading.value = false;
  }
};

// 业务操作函数
const searchTelemetryList = async () => {
  await loadTelemetryList()
}

const resetFilter = async () => {

  await loadTelemetryList()
  ElMessage.info('已重置筛选条件')
}

const deleteTelemetry = async (row) => {
  try {
    await ElMessageBox.confirm(
        `确定要删除该遥测数据"${row.typeName}"吗？`,
        '确认删除',
        {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning'
        }
    )

    const result = await telemetryDataListAPI.deleteTelemetryData(row.id);

    if (result && result.code === 0) {
      ElMessage.success('删除成功');
      // 刷新任务类型列表
      await loadTelemetryList();
    } else {
      throw new Error(result?.msg || '删除任务类型失败');
    }
  } catch (error) {
    if (error === 'cancel') {
      ElMessage.info('已取消删除');
    } else {
      console.error('删除任务类型失败:', error);
      ElMessage.error(`删除任务类型失败: ${error.message}`);
    }
  }
}

onMounted(async () => {
  console.log('TelemetryDataList onMounted 被调用');
  await loadTelemetryList();
});
</script>

<style scoped>
.telemetry-data-list {
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.filter-bar {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.filter-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-controls .el-input,
.filter-controls .el-select,
.filter-controls .el-button {
  flex-shrink: 0;
}

.table-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.table-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.table-controls {
  display: flex;
  gap: 10px;
}

.table-container {
  flex: 1;
  overflow: hidden;
  padding: 0 20px;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

.time-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.action-buttons {
  display: flex;
  gap: 5px;
  justify-content: center;
}
</style>
